<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创新研发-品质保障</title>
  <!-- 链入css初始化 -->
  <link rel="stylesheet" href="../../css/base.css">
  <!-- 链入头部和底部通用样式 -->
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/main.css">
  <!-- 链入首页主体样式 -->
  <link rel="stylesheet" href="../../css/index.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" type="text/css" href="../../css/animate.css">
  <link rel="stylesheet" type="text/css" href="../../css/innovation/list1.css">
  <!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->
</head>

<body>
  <header></header>

  <div class="productList-container">
    <div class="common-container-img">
      <img class="bannerPc" src="../../img/new/banner_02.jpg" alt="">
      <img class="bannerMb" src="../../img/new/banner_02.jpg" alt="">
      <!-- <ul class="productList-container-type clearfix">
        <li class="productList-container-type-detail pull-left type-detail-marginR"><img class="icon"
            src="../../img/new/icon1.png" alt=""><span>公司研发</span></li>
        <li class="productList-container-type-detail pull-left type-detail-marginR selected"><img class="icon"
            src="../../img/new/icon-1-1.png" alt=""><span>品质保障</span></li>
        <li class="productList-container-type-detail pull-left type-detail-marginR"><img class="icon"
            src="../../img/new/icon-2.png" alt=""><span>工艺流程</span></li>
        </li>
      </ul>
    </div> -->
    <ul class="common-container-type clearfix wow fadeInUpBig">
      <li onclick="window.open('list.html')"><img class="hides" src="../../img/select.jpg" alt=""><img class="icon" src="../../img/new/icon1.png"
          alt=""><span>公司研发</span></li>
      <li class="active"><img class="hides" src="../../img/select.jpg" alt=""><img class="icon" src="../../img/new/icon-1-1.png"
          alt=""><span>品质保障</span></li>
      <li onclick="window.open('list2.html')"><img class="hides" src="../../img/select.jpg" alt=""><img class="icon"
          src="../../img/new/icon-2.png" alt=""><span>工艺流程</span></li>
    </ul>
  </div>
    <div id="innovationList1">
      <div class="titles1 show wow fadeInUpBig">品质保障</div>
      <div class="titleLine1 show wow fadeInUpBig"><span></span></div>
      <div class="productText1 show wow fadeInUpBig">2008年公司设立了研发中心，按照高标准建成了研发能力强、具有国内先进水平的中心实验室。实验室包括物理化学检验系统、
        重金属检验系统、微生物检验系统和品评试验系统等，为产品的销售及出口自检提供了专业的条件和平台。</div>

      <div class="quality wow fadeInUpBig">
        <div class="quality-img clearfix ">
          <div class="pull-left col-lg-8 first">
            <div class="quality-img-title">自动控制，配料精准</div>
            <div class="quality-img-show"><img src="../../img/new/img1.png" alt=""></div>
          </div>
          <div class="pull-left col-lg-4">
            <div class="quality-img-title">充分熟化，香味独特</div>
            <div class="quality-img-show"><img src="../../img/new/img2.png" alt=""></div>
          </div>
        </div>
        <div class="quality-img clearfix ">
          <div class="pull-left col-lg-4 first">
            <div class="quality-img-title">设备先进，工艺考究</div>
            <div class="quality-img-show"><img src="../../img/new/img2.png" alt=""></div>
          </div>
          <div class="pull-left col-lg-8">
            <div class="quality-img-title">精挑细选，品质保障</div>
            <div class="quality-img-show"><img src="../../img/new/img1.png" alt=""></div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <footer></footer>

	<script src="../../js/jquery-1.11.3.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
  <script src="../../js/common.js"></script>
  <script type="text/javascript">
    $(function () {
      $('header').load('../../template/header.html')
      $('footer').load('../../template/footer.html')

      var imgArr = ['../../img/production/banner_05.jpg', '../../img/production/banner_05.jpg', '../../img/production/banner_05.jpg', '../../img/production/banner_05.jpg', '../../img/production/banner_05.jpg']
      var listEle = []
      var url
      $('.selected').css({ 'background': 'url(../../img/select.jpg) no-repeat 100% 100%', 'color': '#fff','background-size': 'cover' }).find('span').css({'color': '#fff' })
      // $('.productList-container-type li').click(function () {
      //   var setTitle = $(this).find('span').html().split('类')[0]
      //   setDomEle(setTitle)
      //   $(this).css({ 'background': 'url(../../img/production/select.png) no-repeat 100% 100%', 'color': '#fff' }).siblings().css({ 'background': '#fff', 'color': '#000' })
      // })

      function setDomEle(setTitle) {
        listEle = []
        var setTitle = setTitle || '十三香'
        $('.titles').html(setTitle)
        $('.productText').html(setTitle + ' - 本品精选多种植物香辛料，经传统工艺炮制，现代技术精制而成')
        $('ul.list li').remove()
        // 兼容ie8
        for (var index = 0, len = imgArr.length; index < len; index++) {
          var item = imgArr[index]
          listEle.push('<a href="#' + url + '" target="_blank">'
            + '<li class="pull-left col-xs-3"><img src=' + item + ' alt=""></li>'
            + '</a>')
        }
        // imgArr.forEach(function (item, index) {
        //   listEle.push('<a href="#' + url + '" target="_blank">'
        //     + '<li class="pull-left col-xs-3"><img src=' + item + ' alt=""></li>'
        //     + '</a>')
        // })
        console.log(listEle.join(''))
        $('ul.list').append(listEle.join(''))
      }
      setDomEle()

      if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
      };
    })



  </script>
</body>

</html>